<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <script src="../../scripts/boot.js" type="text/javascript"></script>
</head>
<body>
    <h1>Form 表单</h1>
    <div id="form1">
        <input name="id" class="mini-hidden"/>
        <table>
            <tr>
                <td>
                    <label for="textbox1$text">TextBox:</label>
                </td>
                <td>
                    <input id="textbox1" name="username" class="mini-textbox" required="true"/>
                </td>
            </tr>
            <tr>
                <td>
                    <label for="pwd1$text">Password:</label>
                </td>
                <td>
                    <input id="pwd1" class="mini-password" required="true"/>
                </td>
            </tr>
            <tr>
                <td>
                    <label for="textarea1$text">TextArea</label>
                </td>
                <td>
                    <input id="textarea1" name="Area" class="mini-textarea" required="true"/>
                </td>
            </tr>
            <tr>
                <td>
                    <label for="date1$text">DatePicker:</label>
                </td>
                <td>
                    <input id="date1" name="BirthDay" class="mini-datepicker" value="2018/12/10" required="true"/>
                </td>
            </tr>
            <tr>
                <td>
                    Spinner:
                </td>
                <td>
                    <input name="Age" class="mini-spinner" minValue="10" maxValue="65"/>
                </td>
            </tr>
            <tr>
                <td>
                    TimeSpinner:
                </td>
                <td>
                    <input name="Time" class="mini-timespinner" format="H:mm"/>
                </td>
            </tr>
            <tr>
                <td>
                    CheckBox:
                </td>
                <td>
                    <input name="Married" class="mini-checkbox" text="婚否" value="Y" trueValue="Y" falseValue="N"/>
                </td>
            </tr>
            <tr>
                <td>
                    ComboBox:
                </td>
                <td>
                    <input name="Country" class="mini-combobox" showNullItem="true" url="../data/countrys.txt" value="cn" textField="text" valueField="id"/>
                </td>
            </tr>
            <tr>
                <td>
                    TreeSelect:
                </td>
                <td>
                    <input name="TreeSelect" class="mini-treeselect" showNullItem="true"
                           url="../data/listTree.txt" multiSelect="true" textField="text" valueField="id" paretField="pid" checkRecursive="true"
                    value="ajax,button"/>
                </td>
            </tr>
            <tr>
                <td>
                    CheckBoxList:
                </td>
                <td>
                    <input name="countrys" class="mini-checkboxlist" repeatItems="3" repeatLayout="flow"
                           url="../data/countrys.txt" textField="text" valueField="id" paretField="pid" checkRecursive="true"
                           value="cn,de,usa"/>
                </td>
            </tr>
            <tr>
                <td>
                    RadioButtonList:
                </td>
                <td>
                    <input name="countrys2" class="mini-radiobuttonlist" repeatItems="4" repeatDirection="vertical"
                           repeatLayout="table" url="../data/countrys.txt" textField="text" valueField="id" value="en"/>
                </td>
            </tr>
            <tr>
                <td>
                    ListBox:
                </td>
                <td>
                    <input name="countrys3" showNullItem="true" class="mini-listbox"
                           style="height: 120px;" url="../data/countrys.txt" textField="text" valueField="id" value="fr"/>
                </td>
            </tr>
            <tr>
                <td>

                </td>
                <td>
                    <input value="SubmitForm" type="button" onclick="submitForm()"/>
                    <input value="LoadForm" type="button" onclick="loadForm()"/>
                    <input value="ResetForm" type="button" onclick="resetForm()"/>
                    <input value="ClearForm" type="button" onclick="clearForm()"/>
                    <input value="SetForm" type="button" onclick="setForm()"/>
                    <input value="GetForm" type="button" onclick="getForm()"/>
                </td>
            </tr>
        </table>
    </div>
    <script type="text/javascript">
        mini.parse();
        function getForm() {
            var form = new mini.Form("#form1");
            var data = form.getData();
            var s = mini.encode(data);
            alert(s);
        }
        function setForm() {
            var obj = {
                String: "abc",
                Date: "2018-12-10",
                Boolean: 'Y',
                TreeSelect: "Ajax",
                countrys: "cn",
                countrys3: "usa"
            };
            var form = new mini.Form("#form1");
            form.setData(obj, false);
        }
        function resetForm() {
            var form = new mini.Form("#form1");
            form.reset();
        }
        function clearForm() {
            var form = new mini.Form("#form1");
            form.clear();
        }
        function submitForm() {
            var form = new mini.Form("#form1");
            var data = form.getData();
            var json = mini.encode(data);
            $.ajax({
                url: "../../FormService?method=saveData",
                type: "post",
                data: {data: json},
                success: function (text) {
                    alert("提交成功，返回结果：" + text);
                }
            });
        }
        function loadForm() {
            var form = new mini.Form("#form1");
            $.ajax({
                url: "../../FormService?method=loadData",
                type: "post",
                success: function (text) {
                    var data = mini.decode(text);
                    form.setData(data);
                }
            });
        }
    </script>

</body>
</html>